<template>
  <div class="MaintainImgbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="three">
        <div class="name">光伏系统电站图片维护</div>
        <div class="image">
          <img
            v-if="guangfuentity.pictureFile"
            :src="'data:image/png;base64,' + guangfuentity.pictureFile"
            alt=""
          />
          <el-empty v-else description="暂无图片" :image-size="100"></el-empty>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            :disabled="guangfuentity.pictureFile ? true : false"
            @click="newadd('guangfu')"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="putguangfu(guangfuentity)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delguangfu('guangfu')"
            >删除</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="three">
        <div class="name">储能系统电站图片维护</div>
        <div class="image">
          <img
            v-if="chunnegentity.pictureFile"
            :src="'data:image/png;base64,' + chunnegentity.pictureFile"
            alt=""
          />
          <el-empty v-else description="暂无图片" :image-size="100"></el-empty>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            :disabled="chunnegentity.pictureFile ? true : false"
            @click="newadd('chuneng')"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="putchuneng(chunnegentity)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delguangfu('chuneng')"
            >删除</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <div class="three">
        <div class="name">充电系统电站图片维护</div>
        <div class="image">
          <img
            v-if="chongdianentity.pictureFile"
            :src="'data:image/png;base64,' + chongdianentity.pictureFile"
            alt=""
          />
          <el-empty v-else description="暂无图片" :image-size="100"></el-empty>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            :disabled="chongdianentity.pictureFile ? true : false"
            @click="newadd('chongdian')"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="putchongdian(chongdianentity)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delguangfu('chongdian')"
            >删除</el-button
          >
        </div>
      </div>
      <!-- 弹窗 -->
      <div>
        <el-dialog
          :title="`${title}系统图片维护`"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <div>
            <el-upload
              class="avatar-uploader"
              action=""
              :auto-upload="false"
              :show-file-list="false"
              :on-change="httpRequest"
            >
              <span v-if="imageUrl">
                <img :src="imageUrl" class="avatar" ref="avatar" />
              </span>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao" size="small">取 消</el-button>
            <el-button type="primary" @click="submit" size="small"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getdianzhanlistapi,
  getchunengimgapi,
  getchongdianapi,
  postguangfuaddapi,
  postguangfudelapi,
  postchongdiandelapi,
  postguangfuupdapi,
  postchunnegaddapi,
  postchunnegupdapi,
  postchunnegdelapi,
  postchongdianaddapi,
  postchongdianupdapi
} from '@/api/Photovoltaic/StatisticsReport/MaintainImg'
import NocheckTree from '../../monitor/component/NocheckTree.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    NocheckTree
  },
  data() {
    return {
      treelist: {},
      guangfuentity: {},
      chunnegentity: {},
      chongdianentity: {},
      dialogVisible: false,
      imageUrl: '',
      title: '',
      fileBase64: '',
      isflag: false
    }
  },

  mounted() {},

  methods: {
    // 弹窗确认
    async submit() {
      if (this.title == '光伏') {
        this.isflag
          ? await postguangfuaddapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '光伏图片新增')
            })
          : await postguangfuupdapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '光伏图片修改')
            })
      } else if (this.title == '储能') {
        this.isflag
          ? await postchunnegaddapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '储能图片新增')
            })
          : await postchunnegupdapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '储能图片修改')
            })
      } else if (this.title == '充电') {
        this.isflag
          ? await postchongdianaddapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '充电图片新增')
            })
          : await postchongdianupdapi(this.treelist.id, {
              uploadFile: this.fileBase64
            }).then((res) => {
              this.setmessage(res, '充电图片修改')
            })
      }
      this.quxiao()
      this.handleNodeClicks(this.treelist)
    },
    // 新增
    newadd(val) {
      this.dialogVisible = true
      this.isflag = true
      if (val == 'guangfu') {
        this.title = '光伏'
      } else if (val == 'chuneng') {
        this.title = '储能'
      } else {
        this.title = '充电'
      }
    },
    // 树节点点击
    async handleNodeClicks(val) {
      this.treelist = val
      //光伏图片
      const {
        data: { entity }
      } = await getdianzhanlistapi({ classId: val.id })
      this.guangfuentity = entity
      // 储能图片
      const chuneng = await getchunengimgapi({ classId: val.id })
      this.chunnegentity = chuneng.data.entity
      // 充电图片
      const chongdian = await getchongdianapi({ classId: val.id })
      this.chongdianentity = chongdian.data.entity
    },
    // 光伏修改
    putguangfu(val) {
      if (!val.pictureFile)
        return this.$message.warning('光伏图片暂无可修改数据')
      this.title = '光伏'
      this.dialogVisible = true
      this.imageUrl = 'data:image/png;base64,' + val.pictureFile
      this.isflag = false
    },
    // 储能修改
    putchuneng(val) {
      if (!val.pictureFile)
        return this.$message.warning('储能图片暂无可修改数据')
      this.title = '储能'
      this.dialogVisible = true
      this.imageUrl = 'data:image/png;base64,' + val.pictureFile
      this.isflag = false
    },
    // 充电修改
    putchongdian(val) {
      if (!val.pictureFile)
        return this.$message.warning('充电图片暂无可修改数据')
      this.title = '充电'
      this.dialogVisible = true
      this.imageUrl = 'data:image/png;base64,' + val.pictureFile
      this.isflag = false
    },
    // 光伏删除
    delguangfu(val) {
      if (val == 'guangfu') {
        this.title = '光伏'
      } else if (val == 'chuneng') {
        this.title = '储能'
      } else {
        this.title = '充电'
      }
      this.$confirm(`此操作将永久删除${this.title}图片, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (this.title == '光伏') {
            const res = await postguangfudelapi(this.treelist.id)
            this.setmessage(res, '光伏图片删除')
          } else if (this.title == '储能') {
            const res = await postchunnegdelapi(this.treelist.id)
            this.setmessage(res, '储能图片删除')
          } else if (this.title == '充电') {
            const res = await postchongdiandelapi(this.treelist.id)
            this.setmessage(res, '充电图片删除')
          }
          this.handleNodeClicks(this.treelist)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    setmessage(res, name) {
      this.$message({
        type: res.code == '200' ? 'success' : 'warning',
        message: res.code == '200' ? `${name}成功` : res.message
      })
    },
    // 上传文件
    httpRequest(data) {
      this.fileBase64 = data.raw
      console.log(this.fileBase64)
      this.imageUrl = URL.createObjectURL(data.raw)
    },
    quxiao() {
      this.dialogVisible = false
      this.imageUrl = ''
    }
  }
}
</script>

<style scoped>
.MaintainImgbox {
  min-height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    padding: 20px;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox {
    width: calc(100% - 310px);
    padding: 20px;
    background-color: #fff;
    .three {
      height: 32%;
      .name {
        margin-bottom: 10px;
      }
      .image {
        width: 260px;
        height: 160px;
        background-color: #ffffff;
        /* border: 1px solid #e7e2e2; */
        filter: drop-shadow(rgba(0, 0, 0, 0.15) 3px 3px 6px) !important;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
::v-deep .el-empty {
  padding: 0;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 260px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}
::v-deep .avatar {
  width: 260px;
  height: 160px;
  display: block;
}
::v-deep .el-button--primary {
  background-color: #1890ff;
}
::v-deep .el-button--danger {
  background-color: red;
}
::v-deep .el-divider--horizontal {
  margin: 10px 0 !important;
}
</style>
